<template>
  <div class="eventAnalysis">
    <el-card shadow="hover">
      <!-- 登录总览 -->
      <div class="searchBox1">
        <div>
          <h4>登录总览</h4>
        </div>
        <div>
          <el-radio-group
            v-model="loginType"
            size="medium"
            fill="#39383D"
            @change="getData"
          >
            <el-radio-button label="1">今日</el-radio-button>
            <el-radio-button label="2">总计</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div class="userStatisticsItem">
        <el-card class="one">
          <h4>登录总次数</h4>
          <div>
            <span class="numSpan">{{ loginTotal }}</span>
            <el-divider></el-divider>
            <span>{{ time }}</span>
          </div>
        </el-card>
        <el-card class="one">
          <h4>一键登录总次数</h4>
          <div>
            <span class="numSpan">{{ oneKey }}</span>
            <el-divider></el-divider>
            <span>{{ time }}</span>
          </div>
        </el-card>
        <el-card class="one">
          <h4>验证码登录总次数</h4>
          <div>
            <span class="numSpan">{{ code }}</span>
            <el-divider></el-divider>
            <span>{{ time }}</span>
          </div>
        </el-card>
        <el-card class="one">
          <h4>微信登录总次数</h4>
          <div>
            <span class="numSpan">{{ wechat }}</span>
            <el-divider></el-divider>
            <span>{{ time }}</span>
          </div>
        </el-card>
        <el-card class="one">
          <h4>QQ登录总次数</h4>
          <div>
            <span class="numSpan">{{ qq }}</span>
            <el-divider></el-divider>
            <span>{{ time }}</span>
          </div>
        </el-card>
      </div>

      <!-- 登录详情表 -->
      <div class="searchBox">
        <div>
          <h3>登录详情表</h3>
        </div>
        <div>
          <el-date-picker
            v-model="lightningTimeVal"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="lightningPickerOptions"
            value-format="yyyy-MM-dd"
            @change="focus"
          >
          </el-date-picker>
          <el-button class="btn" icon="el-icon-search" @click="lightningBtn"
            >查询搜索</el-button
          >
          <el-button class="btn" icon="el-icon-download" @click="exportExcelA"
            >导出Excel</el-button
          >
        </div>
      </div>
      <div id="myChartA" :style="{ width: '100%', height: '500px' }"></div>
      <!-- <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期"> </el-table-column>
        <el-table-column prop="loginNumber" label="登录人数"> </el-table-column>
        <el-table-column prop="oneKey" label="一键登录人数"> </el-table-column>
        <el-table-column prop="code" label="验证码登录人数"> </el-table-column>
        <el-table-column prop="wechat" label="微信登录人数"> </el-table-column>
        <el-table-column prop="qq" label="QQ登录人数"> </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getLoginList"
      /> -->
    </el-card>

    <!-- 电量总览 -->
    <el-card shadow="hover" class="privateChat">
      <div class="searchBox1">
        <div>
          <h4>电量总览</h4>
        </div>
        <div>
          <el-radio-group
            v-model="electricityType"
            size="medium"
            fill="#39383D"
            @change="getElectricity"
          >
            <el-radio-button label="1">今日</el-radio-button>
            <el-radio-button label="2">总计</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div class="userStatisticsItem">
        <el-card class="one">
          <h4>电量领取总数</h4>
          <div>
            <span class="numSpan">{{ get }}</span>
            <el-divider></el-divider>
            <span>{{ time1 }}</span>
          </div>
        </el-card>
        <el-card class="one">
          <h4>电量消耗总数</h4>
          <div>
            <span class="numSpan">{{ consumption }}</span>
            <el-divider></el-divider>
            <span>{{ time1 }}</span>
          </div>
        </el-card>
        <el-card class="one close"></el-card>
        <el-card class="one close"></el-card>
        <el-card class="one close"></el-card>
      </div>
      <!-- 电量领取详情 -->
      <div class="searchBox">
        <div>
          <h3>电量领取详情</h3>
        </div>
        <div>
          <el-date-picker
            v-model="timeValA"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="privateChatPickerOptions"
            value-format="yyyy-MM-dd"
            @change="focusB"
          >
          </el-date-picker>
          <el-button class="btn" icon="el-icon-search" @click="privateChatBtn"
            >查询搜索</el-button
          >
          <el-button class="btn" icon="el-icon-download" @click="exportExcelB"
            >导出Excel</el-button
          >
        </div>
      </div>
      <div id="myChartB" :style="{ width: '100%', height: '500px' }"></div>
      <!-- <el-table :data="tableDataA" style="width: 100%">
        <el-table-column prop="date" label="日期"> </el-table-column>
        <el-table-column prop="getTotal" label="电量领取总数">
        </el-table-column>
        <el-table-column prop="login" label="今日登录领取数"> </el-table-column>
        <el-table-column prop="login_person" label="今日登录领取人数">
        </el-table-column>
        <el-table-column prop="idea" label="发布想法领取数"> </el-table-column>
        <el-table-column prop="idea_person" label="发布想法领取人数">
        </el-table-column>
        <el-table-column prop="share" label="分享想法领取数"> </el-table-column>
        <el-table-column prop="share_person" label="分享想法领取人数">
        </el-table-column>
        <el-table-column prop="tomorrow" label="明日登录领取数">
        </el-table-column>
        <el-table-column prop="tomorrow_person" label="明日登录领取人数">
        </el-table-column>
      </el-table>
      <pagination
        v-show="totalA > 0"
        :total="totalA"
        :page.sync="pageA"
        :limit.sync="pageSizeA"
        @pagination="getElectricityGet"
      /> -->
      <!-- 电量消耗详情 -->
      <div class="searchBox">
        <div>
          <h3>电量消耗详情</h3>
        </div>
        <div>
          <el-date-picker
            v-model="timeValB"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            @change="focusC"
          >
          </el-date-picker>
          <el-button class="btn" icon="el-icon-search" @click="searchBtn"
            >查询搜索</el-button
          >
          <el-button class="btn" icon="el-icon-download" @click="exportExcelC"
            >导出Excel</el-button
          >
        </div>
      </div>
      <div id="myChartC" :style="{ width: '100%', height: '500px' }"></div>
      <!-- <el-table :data="tableDataB" style="width: 100%">
        <el-table-column prop="date" label="日期"> </el-table-column>
        <el-table-column prop="lossTotal" label="电量消耗总数">
        </el-table-column>
        <el-table-column prop="ten" label="10电力吸引消耗数"> </el-table-column>
        <el-table-column prop="ten_person" label="使用10电力吸引人数">
        </el-table-column>
        <el-table-column prop="hundred" label="100电力吸引消耗数">
        </el-table-column>
        <el-table-column prop="hundred_person" label="使用100电力吸引人数">
        </el-table-column>
        <el-table-column prop="thousand" label="1000电力吸引消耗数">
        </el-table-column>
        <el-table-column prop="thousand_person" label="使用1000电力吸引人数">
        </el-table-column>
      </el-table>
      <pagination
        v-show="totalB > 0"
        :total="totalB"
        :page.sync="pageB"
        :limit.sync="pageSizeB"
        @pagination="getElectricityLoss"
      /> -->
    </el-card>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import {
  dataanalysisLogin,
  loginList,
  electricity,
  electricityGet,
  electricityLoss,
  loginCharts,
  electricityGetCharts,
  electricityLossCharts,
} from "@/api/DataAnalysis";
export default {
  components: { Pagination },
  inject: ["reload"],
  data() {
    return {
      loginType: "1",
      electricityType: "1",
      loginTotal: "",
      oneKey: "",
      code: "",
      wechat: "",
      qq: "",
      time: "",
      //闪电会话时间
      lightningPickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      lightningTimeValStartDate: "",
      lightningTimeValEndDate: "",
      lightningTimeVal: "", //渠道增长时间
      tableData: [],
      total: 0,
      page: 1, //页码
      pageSize: 10, //每页条数

      //电量总览
      get: "",
      consumption: "",
      time1: "",
      //私聊分析表时间
      privateChatPickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      timeValStartDateA: "",
      timeValEndDateA: "",
      timeValA: "", //私聊分析表时间
      tableDataA: [],
      totalA: 0,
      pageA: 1, //页码
      pageSizeA: 10, //每页条数
      //电量消耗详情
      timeValB: [],
      pickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      startTimeB: "",
      endTimeB: "",
      tableDataB: [],
      totalB: 0,
      pageB: 1,
      pageSizeB: 10,
    };
  },
  methods: {
    //闪电会话查询搜索
    lightningBtn() {
      // this.page = 1;
      // this.getLoginList();
      this.pin();
    },
    //闪电会话分页
    getList() {},
    //时间闪电会话
    focus(time) {
      if (!this.lightningTimeVal) {
        this.lightningTimeVal = [];
      }
      this.lightningTimeValStartDate = this.lightningTimeVal[0];
      this.lightningTimeValEndDate = this.lightningTimeVal[1];
    },

    //
    privateChatBtn() {
      // this.pageA = 1;
      // this.getElectricityGet();
      this.pinB();
    },
    focusB(time) {
      if (!this.timeValA) {
        this.timeValA = [];
      }
      this.timeValStartDateA = this.timeValA[0];
      this.timeValEndDateA = this.timeValA[1];
    },
    focusC(time) {
      if (!this.timeValB) {
        this.timeValB = [];
      }
      this.startTimeB = this.timeValB[0];
      this.endTimeB = this.timeValB[1];
    },
    searchBtn() {
      // this.pageB = 1;
      // this.getElectricityLoss();
      this.pinC();
    },
    //登录总览
    getData() {
      dataanalysisLogin({ type: this.loginType }).then((res) => {
        if (res.code == 0) {
          this.loginTotal = res.data.total;
          this.oneKey = res.data.oneKey;
          this.code = res.data.code;
          this.wechat = res.data.wechat;
          this.qq = res.data.qq;
          this.time = res.data.time;
        }
      });
    },
    //登录详情表
    // getLoginList() {
    //   loginList({
    //     startTime: this.lightningTimeValStartDate,
    //     endTime: this.lightningTimeValEndDate,
    //     page: this.page,
    //     pageSize: this.pageSize,
    //   }).then((res) => {
    //     if (res.code == 0) {
    //       this.tableData = res.data.list;
    //       this.total = res.data.total;
    //     }
    //   });
    // },
    async pin() {
      const res = await loginCharts({
        startTime: this.lightningTimeValStartDate,
        endTime: this.lightningTimeValEndDate,
      });
      // 基于准备好的dom，初始化echarts实例
      let myChartA = this.$echarts.init(document.getElementById("myChartA"));
      // 绘制图表
      myChartA.setOption({
        color: ["#6493d7"],
        title: {
          text: res.data.time,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["人数"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          // data: res.data.title,
          data: res.data.eventName,
        },
        series: [
          {
            name: "人数",
            type: "bar",
            label: {
              show: true,
            },
            // data: [526, 241, 670, 371, 239],
            data: res.data.data,
            barWidth: 30,
          },
        ],
      });
    },
    //电量总览
    getElectricity() {
      electricity({ type: this.electricityType }).then((res) => {
        if (res.code == 0) {
          this.get = res.data.get;
          this.consumption = res.data.consumption;
          this.time1 = res.data.time;
        }
      });
    },
    //电量领取详情表
    // getElectricityGet() {
    //   electricityGet({
    //     page: this.pageA,
    //     pageSize: this.pageSizeA,
    //     startTime: this.timeValStartDateA,
    //     endTime: this.timeValEndDateA,
    //   }).then((res) => {
    //     if (res.code == 0) {
    //       this.totalA = res.data.total;
    //       this.tableDataA = res.data.list;
    //     }
    //   });
    // },
    async pinB() {
      const res = await electricityGetCharts({
        startTime: this.timeValStartDateA,
        endTime: this.timeValEndDateA,
      });
      // 基于准备好的dom，初始化echarts实例
      let myChartB = this.$echarts.init(document.getElementById("myChartB"));
      // 绘制图表
      myChartB.setOption({
        color: ["#6493d7", "#fcc19d"],
        title: {
          text: res.data.time,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["领取数", "人数"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          // data: res.data.title,
          data: res.data.eventName,
        },
        series: [
          {
            name: "领取数",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            // data: [526, 241, 670, 371, 239],
            data: res.data.getNumber,
            barWidth: 30,
          },
          {
            name: "人数",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            // data: [740, 463, 454, 690, 176],
            data: res.data.personNumber,
            barWidth: 30,
          },
        ],
      });
    },
    //电量消耗详情
    // getElectricityLoss() {
    //   electricityLoss({
    //     page: this.pageB,
    //     pageSize: this.pageSizeB,
    //     startTime: this.startTimeB,
    //     endTime: this.endTimeB,
    //   }).then((res) => {
    //     if (res.code == 0) {
    //       this.totalB = res.data.total;
    //       this.tableDataB = res.data.list;
    //     }
    //   });
    // },
    async pinC() {
      const res = await electricityLossCharts({
        startTime: this.startTimeB,
        endTime: this.endTimeB,
      });
      // 基于准备好的dom，初始化echarts实例
      let myChartC = this.$echarts.init(document.getElementById("myChartC"));
      // 绘制图表
      myChartC.setOption({
        color: ["#6493d7", "#fcc19d"],
        title: {
          text: res.data.time,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["消耗数", "人数"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          // data: res.data.title,
          data: res.data.eventName,
        },
        series: [
          {
            name: "消耗数",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            // data: [1000, 526, 241, 670, 371, 239],
            data: res.data.lossNumber,
            barWidth: 30,
          },
          {
            name: "人数",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            // data: [1000, 740, 463, 454, 690, 176],
            data: res.data.personNumber,
            barWidth: 30,
          },
        ],
      });
    },
    async exportExcelA() {
      const res = await loginList({
        startTime: this.lightningTimeValStartDate,
        endTime: this.lightningTimeValEndDate,
      });
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/excel/Export2Excel"); //注意这个Export2Excel路径
        const tHeader = res.data.tHeader; // 上面设置Excel的表格第一行的标题
        // const filterVal = [
        //   "date",
        //   "loginNumber",
        //   "oneKey",
        //   "code",
        //   "wechat",
        //   "qq",
        // ]; // 上面的index、nickName、name是tableData里对象的属性key值
        // const list = res.data.list; //把要导出的数据tableData存到list
        // const data = this.formatJson(filterVal, list);
        const data = res.data.tBody;
        export_json_to_excel(tHeader, data, "登录详情表"); //最后一个是表名字
      });
    },
    async exportExcelB() {
      const res = await electricityGet({
        page: 1,
        pageSize: 1000,
        startTime: this.timeValStartDateA,
        endTime: this.timeValEndDateA,
      });
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/excel/Export2Excel"); //注意这个Export2Excel路径
        const tHeader = [
          "日期",
          "电量领取总数",
          "电量领取总人数",
          "今日登录领取数",
          "今日登录领取人数",
          "发布想法领取数",
          "发布想法领取人数",
          "分享想法领取数",
          "分享想法领取人数",
        ]; // 上面设置Excel的表格第一行的标题
        const filterVal = [
          "date",
          "getTotal",
          "total",
          "login",
          "login_person",
          "idea",
          "idea_person",
          "share",
          "share_person",
        ]; // 上面的index、nickName、name是tableData里对象的属性key值
        const list = res.data.list; //把要导出的数据tableData存到list
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "电量领取详情"); //最后一个是表名字
      });
    },
    async exportExcelC() {
      const res = await electricityLoss({
        // page: 1,
        // pageSize: 1000,
        startTime: this.startTimeB,
        endTime: this.endTimeB,
      });
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/excel/Export2Excel"); //注意这个Export2Excel路径
        // const tHeader = [
        //   "日期",
        //   "电量消耗总数",
        //   "10电力吸引消耗数",
        //   "使用10电力吸引人数",
        //   "100电力吸引消耗数",
        //   "使用100电力吸引人数",
        //   "1000电力吸引消耗数",
        //   "使用1000电力吸引人数",
        // ]; // 上面设置Excel的表格第一行的标题
        // const filterVal = [
        //   "date",
        //   "lossTotal",
        //   "ten",
        //   "ten_person",
        //   "hundred",
        //   "hundred_person",
        //   "thousand",
        //   "thousand_person",
        // ]; // 上面的index、nickName、name是tableData里对象的属性key值
        // const list = res.data.list; //把要导出的数据tableData存到list
        // const data = this.formatJson(filterVal, list);
        export_json_to_excel(res.data.tHeader, res.data.tBody, "电量消耗详情"); //最后一个是表名字
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
  },
  created() {
    this.getData();
    // this.getLoginList();
    this.getElectricity();
    // this.getElectricityGet();
    // this.getElectricityLoss();
  },
  mounted() {
    this.pin();
    this.pinB();
    this.pinC();
  },
};
</script>

<style lang="less" scoped>
.eventAnalysis {
  margin: 30px;
  height: 100%;
  .privateChat {
    margin-top: 60px;
  }
  .userStatisticsItem {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    .el-divider--horizontal {
      margin: 10px 0px;
    }
    .one {
      width: 240px;
      height: 100%;
      h4 {
        margin: 0px;
        font-size: 20px;
        margin-bottom: 10px;
      }
      .numSpan {
        font-size: 26px;
      }
    }
    .close {
      visibility: hidden;
    }
  }

  .searchBox {
    display: flex;
    justify-content: space-between;
    margin-top: 80px;
  }
  .searchBox1 {
    display: flex;
    justify-content: space-between;
    h4 {
      margin: 0px;
      font-size: 20px;
      margin-bottom: 10px;
    }
  }
  .el-table {
    margin-top: 20px;
  }
  .time {
    font-weight: 700;
  }
}
</style>